<template>
	<view class="category" >
		<!-- 自定义导航栏 transparent-->
			<uni-nav-bar backgroundColor="#fff" :border="false" :fixed="true" :statusBar="true">
				<block v-slot:left>
					<uni-icons class="location" @click="gohome()" color="#000" type="left" size="20"></uni-icons>
				</block>
				<view class="headernav">
					<view class="search"  @click="$goURl('/pages/vicinity/search')">
							<uni-icons class="location" color="#999" type="search" size="20"></uni-icons>
							<input type="text" placeholder="搜索线下商家" >
					</view>
				</view>
				<block v-slot:right>
					<uni-icons class="location" color="#000" type="location" size="20"></uni-icons>
					{{data.city}}
				</block>
			</uni-nav-bar>
		<view style="width: 100%;">
			<view class="" style="height: 70px;">

			</view>
			<!-- 轮播 -->
				<swiper class="swiper" :autoplay="true">
					<swiper-item class="swiper-item" v-for="(item, index) in data.swiperlist" :key="item.ID">
						<image :src="item.img" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			<!-- 左右联动 -->
			<view class="category" >
				<view class="nav">
					<!-- #ifdef APP-PLUS -->
					<scroll-view  class="bg" scroll-y="true" :scroll-top="data.scrollTop" :scroll-with-animation="true"  style="height: calc(100vh - 550upx);">
						<block v-for="(item,index) in shoplist" :key="index">
								<view class="nav-item " :class="{'ac':data.active == index}"  @click="setTab(index,item.ID)">
									<text>{{item.name}}</text>
								</view>
							</block>
						</scroll-view>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS -->
					<scroll-view  class="bg" scroll-y="true" :scroll-top="data.scrollTop" :scroll-with-animation="true" :style="{'height':$isIos()?'calc(100vh - 700upx)':'calc(100vh - 600upx)'}">
						<block v-for="(item,index) in shoplist" :key="index">
								<view class="nav-item " :class="{'ac':data.active == index}"  @click="setTab(index,item.ID)">
									<text>{{item.name}}</text>
								</view>
							</block>
						</scroll-view>
					<!-- #endif -->
				</view>
				<view class="goodsBox">
					<view>
						<!-- #ifdef APP-PLUS -->
						<scroll-view scroll-y="true"  style="height: calc(100vh - 550upx);"  @scrolltolower="scrolltolower()">
							<view class="goods">
									<view class="goods-item" v-for="(item,index) in data.shopsecond" :key="index"  @click="$goURl(`/subPackages/business/businessdetailDown?id=${item.ID}`)">
										<image class="commImg" :src="item.shop_head" mode=""></image>
										<view class="commodList">
											<text class="name textsl1">{{item.name}}</text>
											<view class="price">
												<uni-rate  size="20" :disabled="true" disabledColor="#FFC41F" :value="item.star" />
											</view>
											<view class='preferential'>

												<text class="textsl1">距离：{{jl(item.distance)||0}}KM</text>
											</view>
											<view class="preferential"  @click.stop="open(item)">
												<text class="textsl2">{{item.province+item.city+item.area+item.address}}</text>
											</view>
										</view>
									</view>
									<empty style="width: 100%;" v-if="data.shopsecond.length==0"></empty>
								</view>
							</scroll-view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS -->
						<scroll-view scroll-y="true"  :style="{height:$isIos()?'calc(100vh - 700upx)':'calc(100vh - 600upx)'}" @scrolltolower="scrolltolower()">
							<view class="goods">
									<view class="goods-item" v-for="(item,index) in data.shopsecond" :key="index"  @click="$goURl(`/subPackages/business/businessdetailDown?id=${item.ID}`)">
										<image class="commImg" :src="item.shop_head" mode=""></image>
										<view class="commodList">
											<text class="name textsl1">{{item.name}}</text>
											<view class="price">
												<uni-rate  size="20" :disabled="true" disabledColor="#FFC41F" :value="item.star" />
											</view>
											<view class='preferential'>

												<text class="textsl1">距离：{{jl(item.distance)||0}}KM</text>
											</view>
											<view class="preferential"  @click.stop="open(item)">
												<text class="textsl2">{{item.province+item.city+item.area+item.address}}</text>
											</view>
										</view>
									</view>
									<empty style="width: 100%;" v-if="data.shopsecond.length==0"></empty>
								</view>
							</scroll-view>
						<!-- #endif -->

					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const {

		proxy

	} = getCurrentInstance();
	const data = reactive({
		city:'重庆',
		active: 0,
		scrollTop: 0,
		height: 0,
		shoplist: [],
		// 分类列表子集
		shoplistDe: [],
		shopsecond:[],
		secondID:-1,
		dataID:1,
		isShow:false,			//是否显示规格蒙版
		goods:{},
		lists: [], //规格
		goodsdetali:{},
		listckeck:[],
		listckecks:[],
		selectlist:[],
		speci:0,			//规格ID
		number:1,			//数量
		page:0,
		pages:1,
		size:50,
		swiperlist:[]
	})
	let shoplist = ref([])
	onLoad((opt) => {
	carouselList()
		secondary()
		// #ifdef APP-PLUS
		const appAuthorizeSetting = uni.getAppAuthorizeSetting()
		 console.log(appAuthorizeSetting.locationAuthorized!==" ","位置获取权限")
		// if(appAuthorizeSetting.locationAuthorized!=="authorized"){//判断iOS上是否给予位置权限，有权限返回true，否则返回false
		if(appAuthorizeSetting.locationAuthorized!==" "){//判断iOS上是否给予位置权限，有权限返回true，否则返回false
			uni.showToast({
				position :"top",
				title: '提示:该操作需要使用到你的位置获取权限，用于获取您的位置推荐附近商家',
				icon: 'none', // 不显示图标
				duration: 10000 ,// 持续时间，单位毫秒  ,
				success() {
					setTimeout(()=>{

						uni.getLocation({
							type:'wgs84',
							success:function(res) {
								data.longitude=res.longitude
								data.latitude=res.latitude
								var url = "https://restapi.amap.com/v3/geocode/regeo?key=3e2ed72107f91ba0e8a4f25e297eba78&location=" + res.longitude+','+res.latitude
								uni.request({
									url:url,
									method:"get",
									success(ress) {

										console.log("address2222",ress)
										data.city=ress.data.regeocode.addressComponent.province
										secondary()
									}
								})
							},
							fail:function(err) {
								console.log('err',err)
								secondary()
							}
						})
					},1000)
				}
			});
		}
		// #endif
		// #ifndef APP-PLUS
		uni.getLocation({
			type:'wgs84',
			success:function(res) {
				data.longitude=res.longitude
				data.latitude=res.latitude
				var url = "https://restapi.amap.com/v3/geocode/regeo?key=3e2ed72107f91ba0e8a4f25e297eba78&location=" + res.longitude+','+res.latitude
				uni.request({
					url:url,
					method:"get",
					success(ress) {
						console.log("address",ress)
						data.city=ress.data.regeocode.addressComponent.province
						secondary()
					}
				})
			},
			fail:function(err) {
				console.log('err',err)
				secondary()
			}
		})
		// #endif
	})
	onShow(() => {
		// 业务逻辑
	})
		// 获取商家轮播
	function carouselList (){
		proxy.$request({
			url: `api/carouselList/?code=0&page=1&size=100`,
			method: 'get',
			success(res) {
				console.log(res,"rrr")
				data.swiperlist=res.data.data
			}
		})
	}
function jl(num){
	console.log(num,"nummmmm")
	let nums=(Number(num)/1000).toFixed(3)
	let numss=nums.toString().split('.')
	let number=Number(numss[1])
	if(number>(Number(number.toString()[0])*100)&number!=0){

		return numss[0]+'.'+(Number(number.toString()[0])+1)
	}else{
		return numss[0]+'.'+Number(number.toString()[0])
	}
}
	function gohome(){
		uni.switchTab({
			url:"/pages/index/index"
		})
	}
	function open(item){
		console.log(item.latitude,item.longitude)
		uni.openLocation({
		  latitude: item.longitude,  // 目标纬度
		  longitude: item.latitude,  // 目标经度
		  name: item.address,
		  address: item.province+item.city+item.area,
		  success: function() {
		    console.log('打开地图导航成功');
		  },
		  fail: function(err) {
		    console.log('打开地图导航失败', err);
		  }
		})
	}

	// 商品分类
	function secondary(){
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999&code=-1`, //-1全部 0线上 1线下
			method: 'get',
			success(res) {
				console.log(res,"resresres")
				shoplist.value=[{name:'全部',ID:-1},...res.data.data]
				data.page=0
				data.pages=1
				data.shopsecond=[]
				getSHOP(-1)
			}
		})
	}
	function scrolltolower(){
		getSHOP(shoplist.value[data.active].ID)
	}
	// 获取商家
	function getSHOP(ID){
		console.log('获取商家',data.page,data.pages)
		if(data.page<data.pages){
			data.page++
			proxy.$request({
				url:`api/businessList/?page=${data.page}&size=${data.size}&longitude=${data.longitude}&latitude=${data.latitude}&shop_class_id=${ID}&distance=5000000&`,  //
				method:'get',
				success:(res)=>{
					console.log('pages', res)
					  res.data.data.forEach(item=>{
						data.shopsecond.push(item)
					})
					data.pages = Math.ceil(res.data.total/data.size)
				}
			})
		}

		}
		function setTab(index,id){
			console.log(index,id)
			data.active=index
			data.page=0
			data.pages=1
			data.shopsecond=[]
			getSHOP(id)
		}
</script>

<style scoped lang="scss">


	.category {
		display: flex;
		// position: absolute;
		width: 100%;

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		uni-scroll-view {
			height: 100%;
		}

		.bg {
			background: #F7F8F9;
		}

		.nav {
			width: 25%;

			.nav-item {
				width: inherit;
				background: #F7F8F9;
				text-align: center;
				height: 60px;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				text{
					font-size: 30rpx;
					color: #222222;
					white-space:normal;
					word-wrap:break-word;
					line-height: 40rpx;
					padding: 0 8px;
				}
			}

			.ac {
				color: #333;
				font-size: 30rpx;
				background: #fff;
				font-weight: 700;
				// padding: 0 8px;
			}

			.ac:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 40upx;
				width: 8rpx;
				height: 50rpx;
				background: $color4;
				border-radius: 2rpx;
			}
		}

		.goodsBox {
			width: 70%;
			padding-left: 30rpx;
			background: #ffffff;
			.second{
				width: 100%;
				display: flex;
				.back{
					display: inline-block;
					padding: 4px 12px;
					background: #f5f5f5;
					color: #666;
					margin-right: 10px;
					border-radius: 20px;
					font-size: 14px;
				}
				.linbei{
					background: #f4391c;
					color: #fff;
				}
			}
			.goods {
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;

				.goods-item {
					width: 100%;
					display: flex;
					margin-bottom: 40rpx;
					margin-right: 20rpx;

					.commImg {
						display: block;
						width: 198rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
					.commodList{
						width: 65%;
						margin-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name{
							color: #303133;
							font-size: 14px;
							font-weight: 700;
						}
						.price{
							display: flex;
							align-items: center;
							text{
								color: #f4391c;
								font-weight: 700;
							}
							image{
								width: 30px;
								height: 14px;
								margin-left: 10upx;
							}
						}
						.preferential{
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								// text-decoration: line-through;
								color: #909399;
								font-size: 10px;
							}
							image{
								width: 25px;
								height: 25px;
								margin-right: 20px;
							}
						}
					}

				}
			}
		}
	}
	.headernav{
		display: flex;
		align-items: center;
		width: 100%;
		.search{
		width: 100%;
		display: flex;
		align-items: center;
		padding:10upx 20upx;
		background-color: #f5f5f5;
		border-radius: 40upx;
		input{
			font-size: 24upx;
		}
			.location{
				margin-right: 10upx;
			}
		}
	}
	.swiper {
		overflow: hidden;
		height: 320upx;
		margin: 30upx;
		border-radius: 30upx;
		// margin-top: 50px;
		.swiper-item {
			height: 320upx;
			width: 100%;
			overflow: hidden;

			image {
				width: calc(100%);
				height: 320upx;
			}
		}
	}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>
